<!--
 * @Author: your name
 * @Date: 2022-03-06 22:25:55
 * @LastEditTime: 2022-03-19 20:57:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\home\header\headerCmp\Login.vue
-->

<template>
  <el-dialog
    :visible="loginDialogVisible"
    title="登录"
    width="30%"
    custom-class="launch-assess"
    :before-close="closeDialog"
    :append-to-body="true"
    :center="true"
  >
    <el-form
      :model="userinfo"
      :rules="rules"
      ref="form"
      label-width="80px"
      class="ms-content"
    >
      <el-form-item prop="username" label="用户名">
        <el-input v-model="userinfo.username" placeholder="请输入用户名">
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input
          type="password"
          v-model="userinfo.password"
          @keyup.enter.native="onSubmit()"
          placeholder="请输入密码"
        >
        </el-input>
      </el-form-item>
      <!-- <div class="login-btn">
        <el-button type="primary" @click="onSubmit()">登录</el-button>
      </div> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">登录</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入接口
import { toLogin } from '@/api/user'
// 导入本地存储的函数
import db from '@/util/localstorage'
export default {
  name: 'Login',
  props: {
    loginDialogVisible: { type: Boolean, default: false }
  },
  data() {
    return {
      userinfo: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.resetForm()
      this.$emit('update:loginDialogVisible', false)
    },
    // 确认按钮
    onSubmit() {
      this.$refs.form.validate(async (valid, obj) => {
        if (valid) {
          console.log('成功了')
          let res = await toLogin({ ...this.userinfo })
          if (res.code == 200) {
            this.$message.success('登录成功')
            // 保存用户的token
            db.save('token', res.token)
            // 保存用户的信息
            db.save('user', res.user)
            // 设置信息(用户的头像和用户名)
            this.$emit('loginSuccess', res.user)
            // 关闭弹框
            this.closeDialog()
          }
        } else {
          for (let key in obj) {
            this.$message.error(obj[key][0].message)
            return false
          }
        }
      })
    },
    // 重置表单 和 校验
    resetForm() {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scope>
.launch-assess {
  // .el-dialog__header {
  //   display: none;
  // }
  .el-dialog__body {
    // padding: 20px 20px;
    padding-bottom: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }
  .el-date-editor,
  .el-select {
    width: 100%;
  }
}
</style>
